<!--
 * @Description: 事件信息列表
 * @Author: JiangMing
 * @Date: 2021-09-1 17:20:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-1 17:20:00
-->
<template>
  <view class="page page-content">
    <SearchBar ref="searchBar" class="page-header" />
    <ScrollList :list="eventList" :total="total" class="list-wrapper" @scrolltolower="scrollLoad">
      <view class="event-list">
        <view v-for="(item,index) in eventList" :key="index" class="event-item" @click="linkTo(item)">
          <view class="event-item__head">
            <EventLevelBar :level="item.eventLevel" />
            <EventStatusBar :state="item.status" class="status" />
          </view>
          <view class="event-item__content">
            <view class="event-item__info">
              <view class="title">{{ item.eventName }}</view>
              <view class="event-item__foot">
                <text class="tag">{{ item.eventType }}</text>
                <view class="date">
                  <image src="@/static/images/time.png" mode="aspectFit" class="date-icon" />
                  <text class="date-text">{{ item.createTime }}</text>
                </view>
              </view>
            </view>
            <view>
              <text v-if="item.task" class="number">{{ item.task }}</text>
            </view>
          </view>
        </view>
      </view>
    </ScrollList>
  </view>
</template>

<script>
import SearchBar from '@/components/searchBar';
import ScrollList from '@/components/scrollList';
import EventLevelBar from '@/components/eventLevelBar';
import EventStatusBar from '@/components/eventStatusBar';

export default {
  components: {
    SearchBar,
    ScrollList,
    EventLevelBar,
    EventStatusBar
  },
  data() {
    return {
      searchParams: {
        pageNum: 1,
        paegSize: 10,
      },
      total: 8,
      eventList: [
        {
          eventLevel: 1,
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '1',
          task: 4,
          id: 101
        },
        {
          eventLevel: 2,
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '2',
          task: 4,
          id: 102
        },
        {
          eventLevel: 3,
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '1',
          task: 4,
          id: 103
        },
        {
          eventLevel: 4,
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '1',
          task: 4,
          id: 104
        },
        {
          eventLevel: 1,
          eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
          eventType: '洪涝',
          createTime: '2021-12-12  12:20:12',
          status: '1',
          task: 4,
          id: 105
        },
      ],
    };
  },
  onLoad(options) {

  },
  methods: {
    scrollLoad() {
      if (this.eventList.length < this.total) {
        this.searchParams.pageNum ++;
        this.getList();
      }
    },
    getList() {
      this.eventList.push({
        eventLevel: 1,
        eventName: '核查环城路附近发生洪涝灾害核查环城路附近发生洪涝灾害',
        eventType: '洪涝',
        createTime: '2021-12-12  12:20:12',
        status: '2',
        task: 4,
      })
    },
    linkTo(row) {
      console.log(row)
      uni.navigateTo({
        url: '/pages/eventDetail/index?id=' + row.id,
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  flex-direction: column;
}
.list-wrapper {
  flex: 1;
  overflow-y: auto;
}
.event-list {
  padding: 40rpx 32rpx;
  .event-item {
    border-radius: 16rpx;
    background: #fff;
    box-shadow: 0px 5rpx 15rpx rgba(44, 121, 247, 0.2);
    margin-bottom: 32rpx;
    padding: 0 32rpx 32rpx 32rpx;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .event-item__head {
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    margin-bottom: 16rpx;
  }
  .event-item__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
  }
  .event-item__info {
    width: calc(100% - 80rpx);
  }
  .event-item__foot {
    display: flex;
    align-items: center;
  }
  .status {
    margin-top: 10rpx;
  }
  .title {
    font-size: 30rpx;
    color: #2B2B2B;
    margin-bottom: 16rpx;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .tag {
    display: inline-block;
    border-radius: 16rpx;
    background: rgba(50, 148, 255, 0.2);
    border: 1px solid #027aff;
    color: #027aff;
    padding: 6rpx 16rpx;
    line-height: 18rpx;
    margin-right: 20rpx;
  }
  .date {
    color: rgba(43, 43, 43, .6);
    .date-icon {
      width: 24rpx;
      height: 24rpx;
      vertical-align: middle;
      margin-right: 10rpx;
    }
    .date-text {
      vertical-align: middle;
    }
  }
  .number {
    display: inline-block;
    width: 40rpx;
    height: 40rpx;
    border-radius: 16rpx;
    background-image: linear-gradient(rgba(255, 203, 82, 1), rgba(255, 164, 81, 1));
    text-align: center;
    line-height: 40rpx;
    color: #FFF;
  }
}
</style>
